<template>
  <a-layout>
    <a-layout-sider
        v-model:collapsed="state.isCollapse"
        :trigger="null"
        collapsible
    >
      <common-aside></common-aside>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff;padding: 10px 20px;">
        <common-header></common-header>
      </a-layout-header>
      <common-tabs></common-tabs>
      <a-layout-content
          :style="{
          margin: '10px',
          padding: '10px',
          background: '#fff',
        }"
      >
        <RouterView/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import {reactive, computed, onBeforeMount} from "vue";
import {RouterView} from "vue-router";
import {index} from "@/stores";
import CommonHeader from "@/components/CommonHeader.vue";
import CommonAside from "@/components/CommonAside.vue";
import CommonTabs from "@/components/CommonTabs.vue";

const state = reactive({
  isCollapse: computed(() => index().isCollapse),
});

onBeforeMount(() => {
  index().initStore();
});
</script>

<style scoped>

</style>
